<template>
  <div class="realorder">
    <!-- 黑色导航栏 -->
    <!-- <navTop></navTop> -->
    <!-- 一级导航栏 -->
    <!-- <navTwo class="navTwo"></navTwo> -->

    <!-- 主要内容部分 -->
    <main>
      <!-- <div class="orderTop">
        <h1>我的订单</h1>
        <p>
          <router-link to="/shopmall">继续购物 ></router-link>
        </p>
      </div> -->

      <div class="orderMain">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="所有订单" name="first">
            <div class="title">
              <p>宝贝</p>
              <p>单价</p>
              <p>数量</p>
              <p>商品操作</p>
              <p>实付款</p>
              <p>交易状态</p>
              <p>交易操作</p>
            </div>
            <div class="demonstration">
              <div class="orderBox" v-for="item in orderList2" :key="item.id">
                <div class="orderTitle">
                  <div>
                    {{ item.order_time.slice(0, -9) }}
                    <span>订单号：{{ item.order_id }}</span>
                  </div>
                  <div @click="DelOrder(item.id)" style="cursor: pointer">
                    <i class="el-icon-delete-solid"></i>
                  </div>
                </div>
                <div class="orderMain">
                  <div class="orderLeft">
                    <div
                      v-for="item2 in JSON.parse(item.goods_info)"
                      :key="item2.id"
                      class="goodsInfo"
                    >
                      <div>
                        <!-- {{ item2 }} -->
                        <img :src="item2.s_goods_photos[0].path" alt="" />
                      </div>
                      <div>{{ item2.goods_name }}</div>
                      <div>￥{{ item2.price.toFixed(2) }}</div>
                      <div>{{ item2.sold_num }}</div>
                      <div>
                        <span @click="links">联系商家</span>
                      </div>
                    </div>
                  </div>
                  <div class="orderRight">
                    <!-- {{ item }} -->
                    <div>￥{{ item.sumPrice.toFixed(2) }}</div>
                    <div>
                      {{
                        item.status == -1 ? "已删除" : orderStatus[item.status]
                      }}
                    </div>
                    <div>
                      <span
                        v-show="item.status != 1"
                        style="cursor: pointer"
                        @click="goAllgoodsFn"
                        >再次购买</span
                      >
                      <el-button
                        v-show="item.status == 1"
                        @click="goPay(item)"
                        type="danger"
                        size="mini"
                        round
                        >继续付款</el-button
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <el-pagination
              layout="prev, pager, next"
              :total="Number(orderLength)"
              :page-size="3"
              @next-click="handleChange"
              @prev-click="handleChange"
              @current-change="handleChange"
            ></el-pagination>
            <!-- {{ orderList }} -->
          </el-tab-pane>
          <!-- 未付款 -->
          <el-tab-pane label="未付款" name="second">
            <div class="title">
              <p>宝贝</p>
              <p>单价</p>
              <p>数量</p>
              <p>商品操作</p>
              <p>实付款</p>
              <p>交易状态</p>
              <p>交易操作</p>
            </div>
            <!-- <div v-show=""></div> -->
            <div v-show="NoPayOrderList.length == 0" class="noOrderbox">
              <p>这里什么都没有</p>
            </div>
            <div class="orderBox" v-for="item in NoPayOrderList" :key="item.id">
              <div class="orderTitle">
                <div>
                  {{ item.order_time.slice(0, -9) }}
                  <span>订单号：{{ item.order_id }}</span>
                </div>

                <div @click="DelOrder(item.id)" style="cursor: pointer">
                  <i class="el-icon-delete-solid"></i>
                </div>
              </div>
              <div class="orderMain">
                <div class="orderLeft">
                  <div
                    v-for="item2 in JSON.parse(item.goods_info)"
                    :key="item2.id"
                    class="goodsInfo"
                  >
                    <div>
                      <!-- {{ item2 }} -->
                      <img :src="item2.s_goods_photos[0].path" alt="" />
                    </div>
                    <div>{{ item2.goods_name }}</div>
                    <div>￥{{ item2.price }}</div>
                    <div>{{ item2.sold_num }}</div>
                    <div>
                      <span @click="links">联系商家</span>
                    </div>
                  </div>
                </div>
                <div class="orderRight">
                  <!-- {{ item }} -->
                  <div>￥{{ item.sumPrice }}</div>
                  <div>
                    {{
                      item.status == -1 ? "已删除" : orderStatus[item.status]
                    }}
                  </div>
                  <div>
                    <el-button
                      @click="goPay(item)"
                      type="danger"
                      size="mini"
                      round
                      >继续付款</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已付款" name="Third">
            <div class="title">
              <p>宝贝</p>
              <p>单价</p>
              <p>数量</p>
              <p>商品操作</p>
              <p>实付款</p>
              <p>交易状态</p>
              <p>交易操作</p>
            </div>
            <!-- <div v-show=""></div> -->
            <div v-show="PayOrderList.length == 0" class="noOrderbox" style="">
              <p>这里什么都没有</p>
            </div>
            <div class="orderBox" v-for="item in PayOrderList" :key="item.id">
              <div class="orderTitle">
                <div>
                  {{ item.order_time.slice(0, -9) }}
                  <span>订单号：{{ item.order_id }}</span>
                </div>

                <div @click="DelOrder(item.id)" style="cursor: pointer">
                  <i class="el-icon-delete-solid"></i>
                </div>
              </div>
              <div class="orderMain">
                <div class="orderLeft">
                  <div
                    v-for="item2 in JSON.parse(item.goods_info)"
                    :key="item2.id"
                    class="goodsInfo"
                  >
                    <div>
                      <!-- {{ item2 }} -->
                      <img :src="item2.s_goods_photos[0].path" alt="" />
                    </div>
                    <div>{{ item2.goods_name }}</div>
                    <div>￥{{ item2.price }}</div>
                    <div>{{ item2.sold_num }}</div>
                    <div>
                      <span @click="links">联系商家</span>
                    </div>
                  </div>
                </div>
                <div class="orderRight">
                  <!-- {{ item }} -->
                  <div>￥{{ item.sumPrice }}</div>
                  <div>
                    {{
                      item.status == -1 ? "已删除" : orderStatus[item.status]
                    }}
                  </div>
                  <div>
                    <span
                      v-show="item.status != 1"
                      style="cursor: pointer"
                      @click="goAllgoodsFn"
                      >再次购买</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </main>
    <!-- 底部 -->
    <!-- <bottomList></bottomList> -->
  </div>
</template>

<script>
// import navTop from "../components/navtop";
// import navTwo from "../components/navTwo";
// import bottomList from "../components/bottomList";
import { getOrder, delOrder } from "../../api/test";
import { tempToData } from "../../utils/time";
export default {
  name: "realorder",
  components: {
    // navTop,
    // navTwo,
    // bottomList,
  },
  data() {
    return {
      //已下单结算完成的订单
      empty: true,
      NoPayOrderList: [],
      PayOrderList: [],
      activeName: "first",
      orderLength: [],
      orderStatus: {
        0: "订单已过期",
        1: "已下单未付款",
        2: "订单已支付",
        3: "订单已发货",
        4: "订单退货中",
        5: "订单退款中",
        6: "订单已完成",
        7: "订单已取消",
      },
      orderList: "",
      //已完成和未完成的订单选择的状态值
      flag: true,
      //用户勾选的商品，未结算的订单
      order: JSON.parse(sessionStorage.getItem("order")) || [],
      time: "",
      orderList2: [],
    };
  },
  async created() {
    await getOrder({
      limit: 3,
      page: 1,
      project_id: 149,
    }).then((res) => {
      this.orderList2 = res.data.result.rows;
      this.orderList2.forEach((item) => {
        item.order_time = tempToData(Number(item.order_time));
        let sum = 0;
        JSON.parse(item.goods_info).forEach((item2) => {
          console.log(item2);
          sum += item2.price * item2.sold_num;
        });

        item.sumPrice = sum;
        console.log(item);
        // console.log(item.sumPrice);
      });
    });
    //查看订单
    await getOrder({
      limit: 100,
      page: 1,
      project_id: 149,
    }).then((res) => {
      this.orderList = res.data.result.rows;
      this.orderLength = res.data.result.rows.length;
      // console.log(this.orderLength);
      this.orderList.forEach((item) => {
        item.order_time = tempToData(Number(item.order_time));
        let sum = 0;
        JSON.parse(item.goods_info).forEach((item2) => {
          // console.log(item2);
          sum += item2.price * item2.sold_num;
        });

        item.sumPrice = sum;
        // console.log(item);
        // console.log(item.sumPrice);
      });
      // console.log(this.orderList);
    });
    //未付款订单
    getOrder({
      limit: 100,
      page: 1,
      project_id: 149,
      status: 1,
    }).then((res) => {
      this.NoPayOrderList = res.data.result.rows;
      this.NoPayOrderList.forEach((item) => {
        item.order_time = tempToData(Number(item.order_time));
        let sum = 0;
        JSON.parse(item.goods_info).forEach((item2) => {
          sum += item2.price;
        });
        item.sumPrice = sum;
      });
      // console.log(this.orderList);
    });
    //已付款订单
    getOrder({
      limit: 100,
      page: 1,
      project_id: 149,
      status: 2,
    }).then((res) => {
      this.PayOrderList = res.data.result.rows;
      this.PayOrderList.forEach((item) => {
        item.order_time = tempToData(Number(item.order_time));
        let sum = 0;
        JSON.parse(item.goods_info).forEach((item2) => {
          sum += item2.price;
        });
        item.sumPrice = sum;
      });
      // console.log(this.orderList);
    });
  },
  methods: {
    links() {
      console.log(123);
      this.$alert("请拨打电话 ", "联系商家", {
        confirmButtonText: "确定",
        // callback: (action) => {
        //   this.$message({
        //     type: "info",
        //     message: `action: ${action}`,
        //   });
        // },
      });
    },
    goAllgoodsFn() {
      this.$router.push({ path: "/allgoods" });
    },
    //分页器点击事件
    handleChange(page) {
      getOrder({
        limit: 3,
        page: page,
        project_id: 149,
      }).then((res) => {
        this.orderList2 = res.data.result.rows;
        this.orderList2.forEach((item) => {
          item.order_time = tempToData(Number(item.order_time));
          let sum = 0;
          JSON.parse(item.goods_info).forEach((item2) => {
            console.log(item2);
            sum += item2.price * item2.sold_num;
          });

          item.sumPrice = sum;
          console.log(item);
          // console.log(item.sumPrice);
        });
      });
    },
    linkmanFn() {},
    goPay(item) {
      sessionStorage.setItem("OrderId", JSON.stringify(item));
      this.$router.push({ path: "/payInfo" });
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    //确认订单
    DelOrder(id) {
      this.$confirm("此操作将永久删除该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delOrder(id, {}).then(async (res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            //更新页面数据
            await getOrder({
              limit: 10,
              page: 1,
              project_id: 149,
            }).then((res) => {
              this.orderList = res.data.result.rows;
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //结算未结算的商品
    goSettlement() {
      this.$router.push({
        path: "order",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.navTwo {
  height: 80px;
  position: relative;
}

main {
  margin: 0 auto;
  width: 100%;
  // height: auto;
  .orderTop {
    background-color: rgb(255, 255, 255);
    height: 66px;
    line-height: 66px;
    position: relative;
    margin-bottom: 19px;
    p {
      position: absolute;
      cursor: pointer;
      right: 30px;
      top: 0;
      a {
        font-size: 14px;
        &:hover {
          color: red;
        }
      }
    }
  }
  //旧的
  // .orderMain {
  //   background-color: rgb(255, 255, 255);
  //   margin-bottom: 19px;
  //   position: relative;
  //   padding: 50px 20px 100px 20px;
  //   border-radius: 10px;
  //   // padding-bottom: 100px;

  //   .title {
  //     display: flex;
  //     height: 50px;
  //     line-height: 50px;
  //     width: 100%;
  //     font-size: 25px;
  //     background-color: #fff;
  //     .success {
  //       border: 1px solid #000;
  //       flex: 1;
  //     }
  //     .notSuccess {
  //       border: 1px solid #000;
  //       flex: 1;
  //     }
  //     .active {
  //       background-color: skyblue;
  //       color: #fff;
  //     }
  //   }
  //   .orderMainBox {
  //     position: relative;
  //     display: flex;
  //     flex-direction: column;
  //     height: auto;
  //     .orderBox {
  //       margin: 20px 0px;
  //       p {
  //         text-align: left;
  //       }
  //       .tableBox {
  //         // border: 10px solid #000;
  //         table {
  //           width: 100%;
  //           tr {
  //             display: flex;
  //             flex-direction: row;
  //             th {
  //               flex: 1;
  //               border: 1px solid #000;
  //             }
  //             td {
  //               flex: 1;
  //               border: 1px solid #000;
  //               height: 30px;
  //               line-height: 30px;
  //               .ok {
  //                 cursor: pointer;
  //                 &:hover {
  //                   color: red;
  //                 }
  //               }
  //             }
  //           }
  //         }
  //       }
  //     }
  //   }
  //   .orderMainSettlement {
  //     padding-top: 20px;
  //     .settlement {
  //       position: absolute;
  //       right: 40px;
  //       bottom: 20px;
  //       button {
  //         height: 60px;
  //         width: 150px;
  //         border: none;
  //         border-radius: 50px;
  //         font-size: 24px;
  //         background-color: red;
  //         color: white;
  //         cursor: pointer;
  //       }
  //     }
  //   }
  // }
  //新的
  //-------------------------------------------------------------------------------------------
  .noOrderbox {
    width: 100%;
    height: 200px;
    font-size: 20px;
    color: rgb(200, 200, 200);
  }
  .orderMain {
    width: 100%;
    background-color: rgb(255, 255, 255);

    // padding: 40px;
    .title {
      display: flex;
      background-color: rgb(241, 241, 241);
      padding: 10px 0;
      justify-content: space-around;
      margin: 20px 0;

      & > p {
        &:nth-child(1) {
          width: 400px;
        }
        &:nth-child(2) {
          width: 107px;
        }
        &:nth-child(3) {
          width: 53.5px;
        }
        &:nth-child(4) {
          width: 128px;
        }
        &:nth-child(5) {
          width: 128px;
        }
        &:nth-child(6) {
          width: 118px;
        }
        &:nth-child(7) {
          width: 128px;
        }
      }
    }
    .orderBox {
      width: 99.8%;
      display: flex;
      flex-direction: column;
      border: 1px rgb(236, 236, 236) solid;
      // border-right: 1px #000 solid;
      margin: 20px 0px;
      .orderTitle {
        width: 100%;
        background: rgb(241, 241, 241);
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 15px;
        height: 20;
        & > div {
          &:nth-child(1) {
            span {
              font-size: 13px;
            }
          }
          &:nth-child(2) {
            i {
              font-size: 20px;
              &:hover {
                color: orangered;
              }
            }
          }
        }
      }
      .orderMain {
        width: 100%;
        height: 100%;
        display: flex;
        .orderLeft {
          width: 63.5%;
          display: inline-block;
          display: flex;
          flex-direction: column;
          .goodsInfo {
            width: 100%;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid rgb(236, 236, 236);
            &:last-child {
              border-bottom: none;
            }
            border-right: 1px solid rgb(236, 236, 236);
            & > div {
              display: flex;
              align-items: center;
              justify-content: center;
              &:nth-child(1) {
                margin: 10px;
                width: 100px;
                height: 100px;
                img {
                  width: 50px;
                  // height: 100px;
                  height: auto;
                }
              }
              &:nth-child(2) {
                width: 277px;
              }
              &:nth-child(3) {
                // text-align: right;
                width: 100px;
              }
              &:nth-child(4) {
                width: 50px;
              }
              &:nth-child(5) {
                width: 140px;
                & > span {
                  cursor: pointer;
                  &:hover {
                    color: orange;
                  }
                }
              }
            }
          }
        }
        .orderRight {
          display: flex;
          width: 36.5%;
          // justify-content: space-around;

          & > div {
            border-right: 1px solid rgb(236, 236, 236);
            display: flex;
            align-items: center;
            justify-content: center;
            &:nth-child(1) {
              width: 150px;
            }
            &:nth-child(2) {
              width: 150px;
            }
            &:nth-child(3) {
              width: 130px;
              border-right: none;
            }
          }
        }
      }
    }
  }
}
</style>
